<template>
    <div class="singer-song">
      <div class="list">
        <van-list
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad"
        >
          <div v-for="(item, index) in list" :key="index">
            <h4>{{ item.name }}</h4>
            <div class="singer">
              <span v-for="(singerItem, index) in item.singer" :key="index">
                {{ singerItem.name }}
                <span v-show="index != item.singer.length - 1">/</span>
              </span>
              <span v-show="item.album.name">
                <span>.</span>
                <span>{{ item.album.name }}</span>
              </span>
            </div>
          </div>
        </van-list>
      </div>
    </div>
  </template>
  
  <script>
  export default {
    props: ["singerId"],
    data() {
      return {
        list: [],
        loading: false,
        finished: false,
        page: 1,
      };
    },
    // created() {
    //   this.getData();
    // },
    methods: {
      getData() {
        this.$request("get", "/singer/songs", {
          singermid: this.singerId,
          num: 30,
          page: this.page,
        }).then((res) => {
          console.log(res);
          this.list = this.list.concat(res.data.list);
          this.loading = false;
  
          this.page++;
          // 数据全部加载完成
          if (res.data.list.length == 0) {
            this.finished = true;
          }
        });
      },
      onLoad() {
        setTimeout(() => {
          this.getData();
          this.loading = true;
        }, 1000);
      },
    },
  };
  </script>
  <style scoped>
  /* 列表的样式 */
  .list h4{
    text-align: left;
    font-size: 1rem;
  }
  .singer{
    text-align: left;
  }
  .list{
    margin:0 1rem;
  }
  .singer span{
    color: rgb(151, 151, 189);
    font-size: 0.8rem;
  }
  .singer>span:nth-last-child(1)>span:nth-child(1){
    color: red;
    font-weight: 900;
    margin:0 0.5rem;
  }
  </style>